<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
    btns: {
        type: Array<string>,
        default: ["数据异动", "聪明币"]
    },
    idx: {
        type: Number,
        default: 0
    },
    callBackfun: {
        type: Function,
        required: true
    }
});
const idx = ref(props.idx);
const ondown = function (index: number) {
    //节流判断
    if (idx.value !== index) {
        idx.value = index;
        props.callBackfun(index);
    }
};
</script>

<template>
    <div class="NavBtn">
        <span v-for="(item, index) in props.btns" @click="() => ondown(index)" :class="index === idx ? 'NavActive' : ''">{{ item }}</span>
    </div>
</template>

<style lang="scss" scoped>
.NavBtn {
    margin-block: 10px;
    margin-inline-start: 16px;

    span {
        font-size: 16px;
        font-family:
            PingFangSC-Regular,
            PingFang SC;
        font-weight: bold;
    }

    //除了第一个
    span:not(:first-child) {
        // color: black;
        margin-left: 40px;
    }
}

.NavActive {
    color: var(--main);
    padding-bottom: 10px;
    border-bottom: var(--main) 3px solid;
}
</style>
